<template>
  <div>
    <el-row :gutter="15">
      <el-col :span="24">
        <el-card class="custom-card">
          <template #header>
            <div class="card-header">
              <span>
                产量对比分析
                <a href="http://47.93.220.105:8586/yuce">进入产量预测系统</a>
              </span>
              <div style="display: flex; align-items: center; gap: 10px;">
                <el-select v-model="selectedCounty" placeholder="选择区县" @change="updateCountyChart" style="width: 200px;">
                  <el-option
                    v-for="county in countyList"
                    :key="county"
                    :label="county"
                    :value="county"
                  />
                </el-select>
                <el-button @click="reFetchData" :loading="loading" type="primary" size="small">
                  重新加载
                </el-button>
              </div>
            </div>
          </template>
          <div v-loading="loading" class="echart" id="countyChart" :style="myChartStyle"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';

export default {
  data() {
    return {
      myChartStyle: { float: 'left', width: '100%', height: '600px' },
      selectedCounty: 'county1',
      countyList: [],
      countyData: {},
      countyChart: null,
      loading: false,
      resizeTimer: null,
      originalWarn: null,
      originalError: null,
      originalAddEventListener: null
    };
  },
  methods: {
    async fetchData() {
      this.loading = true;
      try {
        console.log("使用提供的区县产量数据");
        // 直接更新图表
        this.updateCountyChart();
      } catch (error) {
        console.error('数据处理出错:', error);
      } finally {
        this.loading = false;
      }
    },

    // 初始化区县产量数据
    initCountyData() {
      this.countyData = {
        county1:  { early2022: 515.81258922, early2023: 515.87815823, early2024: 515.83568061, late2022: 515.75418158, late2023: 515.740001,   late2024: 515.63615529, early2025: 515.696562767028809 },
        county2:  { early2022: 516.65800809, early2023: 516.62393134, early2024: 516.55591589, late2022: 516.66686669, late2023: 516.68607944, late2024: 516.58338457, early2025: 516.62321662902832 },
        county3:  { early2022: 515.20632569, early2023: 515.08539279, early2024: 515.04978773, late2022: 515.17731091, late2023: 514.99599587, late2024: 514.88985661, early2025: 514.967169761657715 },
        county4:  { early2022: 515.35206102, early2023: 515.31176392, early2024: 515.23660435, late2022: 515.02041269, late2023: 515.00548815, late2024: 514.88230631, early2025: 514.943886756896973 },
        county5:  { early2022: 515.94274907, early2023: 515.9437959,  early2024: 515.87600966, late2022: 516.01972124, late2023: 515.98924879, late2024: 515.9059797,  early2025: 515.943726539611816 },
        county6:  { early2022: 517.3060965,  early2023: 517.34630388, early2024: 517.31983897, late2022: 517.09966546, late2023: 517.17471838, late2024: 517.06680554, early2025: 517.103580474853516 },
        county7:  { early2022: 517.30532603, early2023: 517.28570519, early2024: 517.20929124, late2022: 517.32374001, late2023: 517.33146291, late2024: 517.292745,   early2025: 517.310958862304688 },
        county8:  { early2022: 512.82901707, early2023: 512.93172368, early2024: 512.72483356, late2022: 512.31855693, late2023: 512.43754143, late2024: 512.42241173, early2025: 512.417656898498535 },
        county9:  { early2022: 515.97989293, early2023: 516.03255138, early2024: 515.92342429, late2022: 515.9306535,  late2023: 515.93868184, late2024: 515.86949745, early2025: 515.916248321533203 },
        county10: { early2022: 516.24091764, early2023: 516.29425403, early2024: 516.23147865, late2022: 515.86162297, late2023: 515.95530572, late2024: 515.81721802, early2025: 515.863659858703613 },
        county11: { early2022: 516.14390551, early2023: 516.12097734, early2024: 515.98809794, late2022: 515.62649275, late2023: 515.5683246,  late2024: 515.48638411, early2025: 515.51205062866211 },
        county12: { early2022: 515.29571944, early2023: 515.18661917, early2024: 515.12088544, late2022: 513.81674169, late2023: 513.7157958,  late2024: 513.70664926, early2025: 513.778304100036621 },
        county13: { early2022: 514.96704564, early2023: 514.91876263, early2024: 514.80405991, late2022: 514.39246702, late2023: 514.1581789,  late2024: 514.03097657, early2025: 514.120806694030762 },
        county14: { early2022: 512.74275363, early2023: 512.48419605, early2024: 512.24519912, late2022: 512.35912909, late2023: 511.93346568, late2024: 511.41813723, early2025: 511.664706230163574 },
        county15: { early2022: 509.317050764,early2023: 509.600024386,early2024: 509.51949866, late2022: 506.273329387,late2023: 506.102448178,late2024: 506.000676105,early2025: 506.018559455871582 },
        county16: { early2022: 513.50792345, early2023: 513.54872319, early2024: 513.56016085, late2022: 510.51620233, late2023: 510.20380069, late2024: 507.428108883,early2025: 507.852343559265137 },
        county17: { early2022: 515.37534087, early2023: 515.19159635, early2024: 515.05716043, late2022: 515.18949025, late2023: 514.95818203, late2024: 514.92972721, early2025: 514.987957000732422 },
        county18: { early2022: 516.76285798, early2023: 516.8632204,  early2024: 516.70878335, late2022: 516.29288975, late2023: 516.48181929, late2024: 516.41182558, early2025: 516.452545166015625 },
        county19: { early2022: 515.66898384, early2023: 515.58780212, early2024: 515.36988016, late2022: 515.4320391,  late2023: 515.22822007, late2024: 515.10310049, early2025: 515.232507705688477 },
        county20: { early2022: 517.16976375, early2023: 517.20686308, early2024: 516.97467259, late2022: 516.98766716, late2023: 517.03001616, late2024: 516.94370309, early2025: 516.99934196472168 },
        county21: { early2022: 515.80576402, early2023: 515.54496715, early2024: 515.32780523, late2022: 515.67888866, late2023: 515.38191061, late2024: 515.29738955, early2025: 515.318229675292969 },
        county22: { early2022: 515.7820563,  early2023: 515.70106356, early2024: 515.43280807, late2022: 515.49011819, late2023: 515.48950963, late2024: 515.36807022, early2025: 515.456594467163086 },
        county23: { early2022: 515.72537212, early2023: 515.64959104, early2024: 515.66455228, late2022: 515.52643964, late2023: 515.39137786, late2024: 515.41815799, early2025: 515.458374977111816 },
        county26: { early2022: 515.86876035, early2023: 515.93771128, early2024: 515.81073906, late2022: 515.48068514, late2023: 515.5389658,  late2024: 515.47913859, early2025: 515.523874282836914 },
        county27: { early2022: 515.83190742, early2023: 515.71919253, early2024: 515.58477082, late2022: 514.34730855, late2023: 514.1492843,  late2024: 514.16493991, early2025: 514.212152481079102 },
        county28: { early2022: 514.34910358, early2023: 514.35150038, early2024: 514.33425024, late2022: 513.55998048, late2023: 513.27645886, late2024: 513.0712914,  early2025: 513.236041069030762 },
        county29: { early2022: 513.26346581, early2023: 513.19961407, early2024: 513.13936269, late2022: 513.27108655, late2023: 513.22007899, late2024: 513.17717346, early2025: 513.210477828979492 },
        county30: { early2022: 515.26510515, early2023: 515.24479157, early2024: 515.18588977, late2022: 514.94526962, late2023: 514.93281775, late2024: 514.95748253, early2025: 514.9584379 },
        county31: { early2022: 516.6851052,  early2023: 516.66347889, early2024: 516.64839115, late2022: 516.69598376, late2023: 516.6769014,  late2024: 516.66034555, early2025: 516.68132209777832 },
        county32: { early2022: 514.6254463,  early2023: 514.58349358, early2024: 514.52572939, late2022: 514.44966776, late2023: 514.3903994,  late2024: 514.37660906, early2025: 514.388165473937988 },
        county33: { early2022: 516.39627581, early2023: 516.45336598, early2024: 516.42771861, late2022: 516.38450857, late2023: 516.42611452, late2024: 516.35583318, early2025: 516.380937576293945 },
        county34: { early2022: 57.106327379, early2023: 507.274634403,early2024: 507.334943631,late2022: 510.03675058, late2023: 510.2067946,  late2024: 510.08095073, early2025: 510.112876892089844 },
        county35: { early2022: 515.89347953, early2023: 515.90614581, early2024: 515.84061223, late2022: 517.02260189, late2023: 517.03372927, late2024: 516.98058522, early2025: 517.00049591064453 },
        county36: { early2022: 511.30774727, early2023: 511.095608,   early2024: 511.02993595, late2022: 512.38182411, late2023: 512.10268109, late2024: 511.8543113,  early2025: 512.027653694152832 },
        county37: { early2022: 514.91973113, early2023: 514.74642509, early2024: 514.69724398, late2022: 515.30724813, late2023: 515.32740703, late2024: 515.14531285, early2025: 515.24233341217041 },
        county38: { early2022: 514.12526735, early2023: 514.43276567, early2024: 514.35867798, late2022: 513.35682745, late2023: 513.28605955, late2024: 513.17291812, early2025: 513.227436065673828 },
        county39: { early2022: 512.82986343, early2023: 512.73350475, early2024: 512.66383159, late2022: 513.25123829, late2023: 513.07982475, late2024: 513.06098127, early2025: 513.127952575683594 },
        county40: { early2022: 515.26625619, early2023: 515.05125483, early2024: 514.98566719, late2022: 515.94195084, late2023: 515.79090971, late2024: 515.65780913, early2025: 515.739022254943848 },
        county41: { early2022: 517.11350055, early2023: 517.07134284, early2024: 516.999289,   late2022: 517.43482806, late2023: 517.46357402, late2024: 517.37011276, early2025: 517.404172897338867 },
        county42: { early2022: 516.49039119, early2023: 516.56164669, early2024: 516.50689531, late2022: 516.67481459, late2023: 516.70993058, late2024: 516.61498958, early2025: 516.646442413330078 },
        county43: { early2022: 516.3465404,  early2023: 515.85354641, early2024: 515.8190901,  late2022: 515.83461968, late2023: 515.82466768, late2024: 515.83150964, early2025: 515.828874588012695 },
        county44: { early2022: 517.14063638, early2023: 517.17390869, early2024: 517.07313309, late2022: 517.33270846, late2023: 517.35454021, late2024: 517.27490962, early2025: 517.314678192138672 },
        county45: { early2022: 517.87700518, early2023: 517.93043515, early2024: 517.86578177, late2022: 517.92996548, late2023: 517.98360634, late2024: 517.90611762, early2025: 517.931480407714844 },
        county46: { early2022: 515.34860368, early2023: 515.41318859, early2024: 515.34537025, late2022: 515.21826239, late2023: 515.28732641, late2024: 515.28034705, early2025: 515.290475845336914 },
        county47: { early2022: 516.50279126, early2023: 516.51383367, early2024: 516.4645708,  late2022: 516.64581757, late2023: 516.61193153, late2024: 516.47800754, early2025: 516.541580200195312 },
        county48: { early2022: 516.79748447, early2023: 516.77756317, early2024: 516.7316025,  late2022: 516.87332899, late2023: 516.84542855, late2024: 516.72768332, early2025: 516.774078369140625 },
        county49: { early2022: 517.36343838, early2023: 517.37483759, early2024: 517.28472986, late2022: 517.48465991, late2023: 517.49616042, late2024: 517.42031521, early2025: 517.444894790649414 },
        county50: { early2022: 517.01343554, early2023: 517.03511525, early2024: 516.94978648, late2022: 517.29134556, late2023: 517.24628802, late2024: 517.0681701,  early2025: 517.155105590820312 },
        county51: { early2022: 514.4005933,  early2023: 514.30889217, early2024: 514.26142577, late2022: 513.71022958, late2023: 513.6011649,  late2024: 513.62892621, early2025: 513.612143516540527 },
        county52: { early2022: 515.07047822, early2023: 515.12745152, early2024: 515.0612733,  late2022: 514.27490152, late2023: 514.1755628,  late2024: 514.07422761, early2025: 514.165319442749023 },
        county53: { early2022: 515.15772864, early2023: 515.11900554, early2024: 515.03639987, late2022: 514.94608109, late2023: 515.07246845, late2024: 514.9496594,  early2025: 514.998017311096191 },
        county54: { early2022: 514.70731545, early2023: 514.70039149, early2024: 514.67006865, late2022: 514.49259054, late2023: 514.82303181, late2024: 514.72008658, early2025: 514.703592300415039 },
        county55: { early2022: 513.23802998, early2023: 513.34286915, early2024: 513.30891918, late2022: 513.81450837, late2023: 513.67076467, late2024: 513.64807104, early2025: 513.682380676269531 },
        county56: { early2022: 510.63659743, early2023: 510.99888655, early2024: 510.92915483, late2022: 515.85551626, late2023: 515.5638484,  late2024: 515.38712104, early2025: 515.53416919708252 },
        county58: { early2022: 510.64808789, early2023: 510.93666002, early2024: 510.86527704, late2022: 511.57805185, late2023: 511.3983803,  late2024: 511.30598192, early2025: 511.389409065246582 },
        county60: { early2022: 513.92215045, early2023: 513.78924528, early2024: 513.70459967, late2022: 512.59702829, late2023: 512.63349024, late2024: 512.21244775, early2025: 512.296186447143555 },
        county61: { early2022: 512.16854677, early2023: 512.07616423, early2024: 512.05053911, late2022: 510.65478817, late2023: 510.36839733, late2024: 510.17000014, early2025: 510.259209632873535 },
        county62: { early2022: 507.744295669,early2023: 58.261624836, early2024: 508.125671763,late2022: 507.620806317,late2023: 57.556276125, late2024: 507.56567333, early2025: 507.594348907470703 },
        county63: { early2022: 515.99135642, early2023: 516.0696887,  early2024: 515.97978042, late2022: 516.01630274, late2023: 516.14900756, late2024: 516.11932031, early2025: 516.104700088500977 },
        county64: { early2022: 515.74519084, early2023: 515.63165937, early2024: 515.53934907, late2022: 515.63120491, late2023: 515.47267783, late2024: 515.37578883, early2025: 515.459016799926758 },
        county65: { early2022: 515.98829947, early2023: 515.99535489, early2024: 515.89878629, late2022: 515.41322529, late2023: 515.37925076, late2024: 515.34232091, early2025: 515.355581283569336 },
        county66: { early2022: 515.52715961, early2023: 515.49364533, early2024: 515.50292222, late2022: 514.23068997, late2023: 513.94242928, late2024: 513.84745478, early2025: 513.876263618469238 },
        county67: { early2022: 513.79773852, early2023: 513.73936293, early2024: 513.73527148, late2022: 512.58263832, late2023: 512.44113381, late2024: 512.30513834, early2025: 512.353827476501465 },
        county71: { early2022: 512.90929496, early2023: 512.92276649, early2024: 512.91277522, late2022: 511.92094455, late2023: 511.87320185, late2024: 511.84874811, early2025: 511.865100860595703 },
        county72: { early2022: 515.21172863, early2023: 515.18633442, early2024: 515.17868391, late2022: 514.36918154, late2023: 514.31593072, late2024: 514.33362499, early2025: 514.355216979980469 },
        county73: { early2022: 513.02999977, early2023: 513.23569416, early2024: 513.16555712, late2022: 512.40659832, late2023: 512.21524176, late2024: 512.19158979, early2025: 512.255183219909668 },
        county74: { early2022: 513.1385614,  early2023: 513.33589694, early2024: 513.32399063, late2022: 512.23343693, late2023: 512.15893151, late2024: 511.65294802, early2025: 511.749842643737793 },
        county75: { early2022: 513.93782988, early2023: 513.98947078, early2024: 513.96784857, late2022: 513.45951487, late2023: 513.57854724, late2024: 513.64605462, early2025: 513.65435791015625 },
        county76: { early2022: 515.80376914, early2023: 515.76707049, early2024: 515.6743705,  late2022: 515.62811513, late2023: 515.69441883, late2024: 515.61258777, early2025: 515.644036293029785 },
        county77: { early2022: 517.03651643, early2023: 516.98897708, early2024: 516.92490735, late2022: 516.31654971, late2023: 516.27187989, late2024: 516.21857383, early2025: 516.258005142211914 },
        county78: { early2022: 514.66820967, early2023: 514.63465622, early2024: 514.62933385, late2022: 514.57170643, late2023: 514.4664933,  late2024: 514.44236428, early2025: 514.465766906738281 },
        county79: { early2022: 516.35549168, early2023: 516.40432699, early2024: 516.30267141, late2022: 516.06804075, late2023: 516.10433789, late2024: 516.01620762, early2025: 516.06587791442871 },
        county80: { early2022: 515.5965395,  early2023: 515.62946449, early2024: 515.6240649,  late2022: 515.49055634, late2023: 515.5383866,  late2024: 515.51160782, early2025: 515.513806343078613 },
        county81: { early2022: 514.0033062,  early2023: 513.93127954, early2024: 513.82225513, late2022: 513.6642017,  late2023: 513.50034148, late2024: 513.44280357, early2025: 513.483489036560059 },
        county82: { early2022: 513.78866226, early2023: 513.77423215, early2024: 513.67769872, late2022: 513.7819928,  late2023: 513.67892909, late2024: 513.71082042, early2025: 513.729070663452148 },
        county83: { early2022: 514.36390545, early2023: 514.31548854, early2024: 514.2511214,  late2022: 514.61059638, late2023: 514.54449299, late2024: 514.55974095, early2025: 514.58017635345459 },
        county84: { early2022: 514.78317321, early2023: 514.7871149,  early2024: 514.75765721, late2022: 514.65320728, late2023: 514.64312733, late2024: 514.59004898, early2025: 514.619662284851074 },
        county85: { early2022: 513.69346082, early2023: 513.49633576, early2024: 513.411462,   late2022: 513.81612867, late2023: 513.58744,    late2024: 513.49714828, early2025: 513.527689933776855 },
        county86: { early2022: 514.97141243, early2023: 515.06273636, early2024: 514.98469259, late2022: 515.11949844, late2023: 515.19324505, late2024: 515.12523425, early2025: 515.152223587036133 },
        county87: { early2022: 514.76740341, early2023: 514.80795307, early2024: 514.77323607, late2022: 514.82839387, late2023: 514.81711857, late2024: 514.77577795, early2025: 514.819878578186035 },
        county88: { early2022: 512.69772995, early2023: 513.12709155, early2024: 512.72597968, late2022: 512.41969162, late2023: 512.34020618, late2024: 511.80686374, early2025: 511.783974647521973 }
      };

      this.countyList = Object.keys(this.countyData);
    },

    // 更新区县选择图表
    updateCountyChart() {
      if (!this.countyChart) return;

      const countyData = this.countyData[this.selectedCounty];
      if (!countyData) return;

      const option = {
        title: {
          text: `${this.selectedCounty} 产量趋势分析 (2022-2025)`,
          textStyle: {
            fontSize: 18,
            fontWeight: 'bold',
            color: '#333'
          },
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0, 0, 0, 0.8)',
          textStyle: {
            color: '#fff'
          },
          borderWidth: 0,
          padding: 10,
          formatter: function (params) {
            let result = '<div style="font-weight: bold;">' + params[0].name + '</div>';
            for (let i = 0; i < params.length; i++) {
              const isPrediction = params[i].name === '预测产量' && params[0].name === '2025年';
              const label = isPrediction ? '预测产量(预测)' : params[i].seriesName;
              result += '<div><span style="display: inline-block; width: 10px; height: 10px; margin-right: 5px; background-color:' + params[i].color + ';"></span>' +
                  label + '&emsp;&emsp;' + params[i].value + ' 吨</div>';
            }
            return result;
          }
        },
        legend: {
          data: ['实际产量', '预测产量'],
          bottom: '0%',
          textStyle: {
            color: '#666'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true,
          backgroundColor: 'rgba(245, 245, 245, 0.8)'
        },
        xAxis: {
          type: 'category',
          data: ['2022年', '2023年', '2024年', '2025年'],
          axisLine: {
            lineStyle: {
              color: '#ccc'
            }
          },
          axisTick: {
            lineStyle: {
              color: '#ccc'
            }
          },
          axisLabel: {
            color: '#666'
          }
        },
        yAxis: {
          type: 'value',
          name: '产量 (吨)',
          min: function(value) {
            // 设置Y轴最小值为数据最小值的95%，增加数据差距的视觉效果
            return Math.floor(value.min * 0.999);
          },
          max: function(value) {
            // 设置Y轴最大值为数据最大值的105%，增加数据差距的视觉效果
            return Math.ceil(value.max * 1.001);
          },
          axisLine: {
            lineStyle: {
              color: '#ccc'
            }
          },
          axisTick: {
            lineStyle: {
              color: '#ccc'
            }
          },
          axisLabel: {
            color: '#666'
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: '#ccc'
            }
          }
        },
        series: [
          {
            name: '预测产量',
            data: [countyData.early2022, countyData.early2023, countyData.early2024, countyData.early2025],
            type: 'line',
            smooth: true,
            lineStyle: {
              color: '#ff6b6b',
              width: 3
            },
            itemStyle: {
              color: function(params) {
                // 2025年使用不同的颜色表示预测数据
                if (params.dataIndex === 3) {
                  return '#ff9f43'; // 橙色表示预测数据
                }
                return '#ff6b6b'; // 红色表示历史数据
              }
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(255, 107, 107, 0.3)'
                }, {
                  offset: 1, color: 'rgba(255, 107, 107, 0.1)'
                }]
              }
            },
            symbol: function(value, params) {
              // 2025年使用不同的标记样式
              if (params.dataIndex === 3) {
                return 'diamond'; // 菱形表示预测数据
              }
              return 'circle'; // 圆形表示历史数据
            },
            symbolSize: function(value, params) {
              // 2025年使用更大的标记
              if (params.dataIndex === 3) {
                return 10;
              }
              return 6;
            }
          },
          {
            name: '实际产量',
            data: [countyData.late2022, countyData.late2023, countyData.late2024, null], // 2025年晚稻数据为空
            type: 'line',
            smooth: true,
            lineStyle: {
              color: '#4ecdc4',
              width: 3
            },
            itemStyle: {
              color: '#4ecdc4'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(78, 205, 196, 0.3)'
                }, {
                  offset: 1, color: 'rgba(78, 205, 196, 0.1)'
                }]
              }
            }
          }
        ],
        toolbox: {
          feature: {
            saveAsImage: {},
            restore: {}
          }
        },
        animation: false,
        useUTC: true
      };

      this.countyChart.setOption(option);
    },

    async reFetchData() {
      console.log("重新加载数据");
      await this.fetchData();
    }
  },
  mounted() {
    this.initCountyData();

    // 全局抑制ECharts相关的警告
    const originalConsoleWarn = console.warn;
    const originalConsoleError = console.error;

    // 重写console.warn来过滤ECharts警告
    console.warn = function(...args) {
      const message = args[0];
      if (typeof message === 'string' &&
          (message.includes('passive') || message.includes('mousewheel') || message.includes('wheel'))) {
        return;
      }
      originalConsoleWarn.apply(console, args);
    };

    // 重写console.error来过滤Violation警告
    console.error = function(...args) {
      const message = args[0];
      if (typeof message === 'string' && message.includes('Violation')) {
        return;
      }
      originalConsoleError.apply(console, args);
    };

    // 保存原始方法以便恢复
    this.originalWarn = originalConsoleWarn;
    this.originalError = originalConsoleError;

    // 配置ECharts全局设置以减少警告
    echarts.registerPreprocessor((option) => {
      // 禁用一些可能导致警告的功能
      if (option.toolbox && option.toolbox.feature) {
        // 禁用数据缩放功能以减少事件监听器
        if (option.toolbox.feature.dataZoom) {
          delete option.toolbox.feature.dataZoom;
        }
      }
    });

    // 重写addEventListener来抑制passive警告
    this.originalAddEventListener = Element.prototype.addEventListener;
    const self = this;
    Element.prototype.addEventListener = function(type, listener, options) {
      // 对于mousewheel和wheel事件，自动添加passive选项
      if (type === 'mousewheel' || type === 'wheel') {
        if (options === undefined) {
          options = { passive: true };
        } else if (typeof options === 'object') {
          options.passive = true;
        } else {
          options = { passive: true };
        }
      }
      return self.originalAddEventListener.call(this, type, listener, options);
    };

    // 使用nextTick确保DOM已经渲染完成
    this.$nextTick(() => {
      // 临时抑制ECharts警告
      const originalWarn = console.warn;
      console.warn = function(...args) {
        const message = args[0];
        if (typeof message === 'string' &&
            (message.includes('passive') || message.includes('mousewheel') || message.includes('wheel'))) {
          return;
        }
        originalWarn.apply(console, args);
      };

      // 初始化图表，添加性能优化配置
      this.countyChart = echarts.init(document.getElementById('countyChart'), null, {
        renderer: 'canvas',
        useDirtyRect: true,
        throttle: 70, // 添加节流配置
        devicePixelRatio: window.devicePixelRatio || 1,
        // 添加更多性能优化选项
        ssr: false,
        useCoarsePointer: true
      });
      this.updateCountyChart();

      // 恢复console.warn
      console.warn = originalWarn;
    });

    this.fetchData();

    // 监听窗口大小变化
    this.handleResize = () => {
      // 清除之前的定时器
      if (this.resizeTimer) {
        clearTimeout(this.resizeTimer);
      }

      // 设置防抖延迟
      this.resizeTimer = setTimeout(() => {
        if (this.countyChart) {
          this.countyChart.resize();
        }
      }, 100);
    };
    window.addEventListener('resize', this.handleResize, { passive: true });
  },

  beforeUnmount() {
    // 恢复原始的console方法
    if (this.originalWarn) {
      console.warn = this.originalWarn;
    }
    if (this.originalError) {
      console.error = this.originalError;
    }

    // 清理定时器
    if (this.resizeTimer) {
      clearTimeout(this.resizeTimer);
      this.resizeTimer = null;
    }

    // 清理事件监听器
    if (this.handleResize) {
      window.removeEventListener('resize', this.handleResize);
    }

    // 销毁图表实例
    if (this.countyChart) {
      this.countyChart.dispose();
      this.countyChart = null;
    }
  }
};
</script>

<style scoped>
.custom-card {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.custom-button {
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.custom-button:hover {
  background-color: #007bff;
}

/* 优化ECharts容器样式 */
.echart {
  position: relative;
  overflow: hidden;
  /* 禁用一些可能导致警告的交互 */
  touch-action: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 确保图表容器有正确的尺寸 */
.echart canvas {
  display: block;
  max-width: 100%;
  height: auto;
}
</style>
